<template>
  <div id="topdiv">
    <span v-if="!urlInfos">Loading...</span>
    <div v-else>
      <div v-for="(urlInfo,index) in urlInfos" :key="index">
        <h3>
          go to you like <a :href="urlInfo.likeUrl" target="_blank"><<{{urlInfo.urlName}}>></a> by click
        </h3>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    name: "App",
    data() {
      return {
        urlInfos: ""
      }
    },
    mounted() {
      //在config-->index.js-->proxyTable处解决跨域问题了
      const url = '/hello';
      // // ajax方式一：VueResource方式进行ajax访问，适用于vue1.0时代，不再推荐
      // this.$http.get(url).then(
      //   //请求成功
      //   response => {
      //     this.urlInfos = response.data;
      //   },
      //   //请求失败
      //   response => {
      //     alert("VueResource方式 请求失败...")
      //   }
      // )
      //  ajax方式二：axios进行ajax请求，推荐适用，在vue2.0
      axios.get(url).then(
        //请求成功
        response => {
          this.urlInfos = response.data;
        }).catch(error => {
          alert("axios方式 请求失败...")
      })

    }
  }
</script>

<style scoped>
  #topdiv {
    text-align: center;
    padding-top: 200px;
  }
</style>
